<template>
    <!--每一个组件名称就是一个类名-->
    <el-container class="home-container">
        <!--页面容器的头部区-->
        <el-header>
            <div>
                <img src="../assets/shoppingcart.jpg" alt="">
                <span>超市供销存管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>

        </el-header>
        <!--页面主体区-->
        <el-container>
            <!--侧边栏-->
            <el-aside width="200px">
                <!--侧边栏菜单区域-->
                <!--:router="true" 点击菜单栏跳转到指定路径-->
                <el-menu
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <!--一级菜单-->
                    <el-submenu index="1">
                        <!--一级菜单的模板区-->
                        <template slot="title">
                            <!--图标-->
                            <i class="el-icon-location"></i>
                            <!--文本-->
                            <span>导航一</span>
                        </template>
                        <!--二级菜单-->
                        <el-menu-item index="1-4-1">
                            <template slot="title">
                                <!--图标-->
                                <i class="el-icon-location"></i>
                                <!--文本-->
                                <span>导航一</span>
                            </template>
                        </el-menu-item>

                    </el-submenu>
                </el-menu>



            </el-aside>
            <!--右侧主体页面-->
            <el-main>
                <!--路由占位符-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>


<!--行为区-->
<script>
    export default {
        created() {
            this.getMenuList()
        },
        data() {
            return {
                //左侧菜单数据
                menulist: []
            }
        },
        methods: {
            logout(){
                /*点击退出按钮的方法 比较简单直接清空sessionStorage
                然后跳转到/login页面就可以了 */
                window.sessionStorage.clear();//清空sessionstora
                this.$router.push("/login"); //重新登录
            },
            async getMenuList() {
                //获取所有菜单
                const {data: res} = await this.$http.get("system/apis/menu?level=" + this.level)
                console.log(res)
            }
        }
    }
</script>


<!--样式区-->
<style lang="less" scoped>
    //让container撑满整个页面
    .home-container{
        height: 100%;
    }
    .el-header {
        background-color: #383838;
        display: flex;
        justify-content: space-between;
        padding-left: 0; //图标贴着左边对其
        align-items: center; //按钮不贴边   居中
        color: white; //文本的颜色
        font-size: 20px;
        > div {  //嵌套给文本进行位置修改
            display: flex;
            align-items: center;
            span {
                margin-left: 15px; //文本和图片的间距像素大小
            }
        }

    }
    .el-aside {
        background-color: #474747;
    }
    .el-main {
        background-color: white;
        text-align: center;

    }

</style>
